<template>
  <div>
    <div class="header_register">
      <div class="register">
        <router-link to="/product/list" style="float: left">返回</router-link>
        <router-link to="/my/registered" href="#" style="float: right">注册</router-link>
      </div>
    </div>
    <div class="header">
      <img src="./logo.adec77d3.png" />
    </div>
    <form class="fresh_content">
      <p class="tel_content">
        <input
          type="text"
          name="17620758225"
          class="tel"
          placeholder="请输入手机号"
          v-model="phone"
        />
        <button type="button" @click="getCode">{{ msg }}</button>
      </p>
      <p class="code_content">
        <input
          type="text"
          name="8848"
          class="code"
          placeholder="请输入验证码"
          v-model="smsCode"
        />
      </p>
      <a
        ><button type="button" class="to_login" @click="login">
          短信登录
        </button></a
      >
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "获取验证码",
      phone: "18711110000",
      smsCode: "",
      count: 5,
      gettting: false,
    };
  },
  methods: {
    async getCode() {
      if (this.gettting) return false;
      try {
        this.gettting = true;
        let timer = setInterval(() => {
          this.msg = this.count--;
          if (this.msg === 0) {
            clearInterval(timer);
            this.msg = "重新获取验证码";
            this.gettting = false;
          }
        }, 1000);
        this.count = 5;
        let res = await this.$axios.get("/user/getSmsCode", {
          phone: this.phone,
        });
        console.log(res);
        this.smsCode = res.smsCode;
      } catch (error) {
        console.log(error);
      }
    },
    async login() {
      // debugger
      try {
        let data = { phone: this.phone, smsCode: this.smsCode };
        console.log(data);
        let res = await this.$axios.post("/user/login", data);
        console.log(res);
        this.$store.commit("updateLoginState", true);
        this.$store.commit("updatePhone", this.phone);
        this.$store.commit("updateToken", res.result.token);
        this.$router.go(-1);
      } catch (error) {
        console.log("error");
      }
    },
  },
};
</script>


<style scoped>
@import "./theNo.css";
</style>